<template>
  <div id="search">
    <div style="padding: 10px;;">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="发布人">
          <el-input v-model="searchForm.user" placeholder="输入发布人" />
        </el-form-item>
        <el-form-item label="发布内容">
          <el-input v-model="searchForm.content" placeholder="输入发布内容" />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="searchForm.time" type="datetimerange" start-placeholder="选择时间段"
            end-placeholder="选择时间段" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="release_table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="60" />
        <el-table-column align="center" label="是否在线">
          <template #default="scope">
            <div>{{ scope.row.online == 1 ? '在线' : '离线' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类型">
          <template #default="scope">
            <div>{{ scope.row.type == 1 ? '门架式' : 'F屏' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="名称" width="180" />
        <el-table-column align="center" prop="content" label="内容" width="180" />
        <el-table-column align="center" prop="user" label="发布人" width="180" />
        <el-table-column align="center" label="发布结果">
          <template #default="scope">
            <div>{{ scope.row.state == 1 ? '成功' : '失败' }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="time" label="发布时间" width="180" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessageBox, ElMessage } from "element-plus";
const searchForm = reactive({});
const tableData = ref([
  {
    id: 1,
    online: 1,
    type: 1,
    name: '主线K471+900上行',
    content: '情报板内容',
    user: 'xxx',
    state: 1,
    time: '2023-9-11 14:30:00'
  },
  {
    id: 2,
    online: 0,
    type: 0,
    name: '主线K471+900下行',
    content: '情报板内容',
    user: 'xxx',
    state: 0,
    time: '2023-9-11 14:30:00'
  },
  {
    id: 3,
    online: 1,
    type: 1,
    name: '主线K472+900上行',
    content: '情报板内容',
    user: 'xxx',
    state: 1,
    time: '2023-9-11 14:30:00'
  },
  {
    id: 4,
    online: 1,
    type: 1,
    name: '主线K472+900下行',
    content: '情报板内容',
    user: 'xxx',
    state: 1,
    time: '2023-9-11 14:30:00'
  }
])
function handleSearch() {
  if (checkform()) {
    console.log(searchForm);
  }
}
function checkform() {
  let flag = false;
  if (searchForm.user == '' || !searchForm.user) {
    ElMessage({
      message: '请填写发布人',
      type: 'warning'
    })
    flag = false;
  } else if (searchForm.content == '' || !searchForm.content) {
    ElMessage({
      message: '请填写发布内容',
      type: 'warning'
    })
    flag = false;
  } else if (searchForm.time == '' || !searchForm.time) {
    ElMessage({
      message: '请选择发布时间段',
      type: 'warning'
    })
    flag = false;
  } else {
    flag = true;
  }
  return flag;
}
</script>

<style scoped>
.release_table {
  padding: 10px;
  background-color: #2F4052;
  min-height: 700px;
  width: 100%;
}
</style>

<style lang='less'>
#search {
  min-height: 700px;
  width: 100;
  background-color: #2F4052;

  .el-input__wrapper {
    background-color: #2E3648;
    color: #ffffff;
    box-shadow: none;
    color: white;
  }

  .el-input__inner {
    color: white;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: none;
  }

  .el-table__inner-wrapper {
    &::before {
      display: none;
    }
  }

  // 头部样式
  .el-table__header-wrapper th {
    background-color: #2F4052;
    color: #fff;
  }

  // 内容行样色
  .el-table__row {
    background-color: #2F4052;
    color: #B2C9EE;
  }

  // 内容行边框
  .el-table__cell {
    border: 0 !important;
  }

  //自定义斑马线和鼠标移入样式
  .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td {
    background-color: #263343 !important;
  }

  .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
    background-color: #2F4052 !important;
  }

  .el-table__body tr:nth-child(even) {
    background-color: #263343;
    /* 偶数行（斑马线）的默认背景色 */
  }

}
</style>